<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>renren-aui</title>
  <link rel="stylesheet" href="../../aui/css/element-theme/index.css">
  <link rel="stylesheet" href="../../aui/css/aui.css">
</head>
<body>
  <div v-cloak class="aui-wrapper aui-page__basic-login">
    <div class="aui-content__wrapper">
      <main class="aui-content">
        <div class="login-header">
          <h2 class="login-brand">renren-aui</h2>
          <ul class="login-intro">
            <li>人人开源后台管理模板系统</li>
          </ul>
        </div>
        <div class="login-body">
          <h3 class="login-title">管理后台登录中心</h3>
          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" status-icon>
            <el-form-item prop="username">
              <el-input v-model="dataForm.username" placeholder="用户名">
                <span slot="prefix" class="el-input__icon">
                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-yonghu"></use></svg>
                </span>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="dataForm.password" type="password" placeholder="密码">
                <span slot="prefix" class="el-input__icon">
                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-mima"></use></svg>
                </span>
              </el-input>
            </el-form-item>
            <el-form-item prop="captcha">
              <el-row :gutter="20">
                <el-col :span="14">
                  <el-input v-model="dataForm.captcha" placeholder="验证码">
                    <span slot="prefix" class="el-input__icon">
                      <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-yanzhengma"></use></svg>
                    </span>
                  </el-input>
                </el-col>
                <el-col :span="10" class="login-captcha">
                  <img :src="dataForm.captchaPath" alt="">
                </el-col>
              </el-row>
            </el-form-item>
            <div class="el-form-item clearfix">
              <el-checkbox v-model="dataForm.rememb" class="fl">记住密码</el-checkbox>
              <a href="./forget.html" class="fr">忘记密码?</a>
            </div>
            <el-form-item>
              <el-button class="login-btn-submit" type="primary" @click="dataFormSubmitHandle()">登录</el-button>
            </el-form-item>
            <div class="login-shortcut">
              <h4 class="login-shortcut__title"><span>使用社交账号登录</span></h4>
              <ul class="login-shortcut__list">
                <li>
                  <a href="#">
                    <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-github"></use></svg>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-weixin"></use></svg>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-qq"></use></svg>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-weibo"></use></svg>
                  </a>
                </li>
              </ul>
            </div>
            <div class="login-faster-register">还没有账号？<a href="./register.html">立即注册</a></div>
          </el-form>
        </div>
        <div class="login-footer">
          <p>
            <a href="https://www.renren.io/" target="_blank">在线演示</a>
          </p>
          <p class="login-copyright"><a href="https://www.renren.io/" target="_blank">人人开源</a>2018 © renren.io</p>
        </div>
      </main>
    </div>
  </div>
  <script src="../../aui/plugins/vue-2.5.17/vue.js"></script>
  <script src="../../aui/plugins/element-2.4.5/index.js"></script>
  <script src="../../aui/plugins/axios-0.18.0/axios.min.js"></script>
  <script src="../../aui/fonts/iconfont.js"></script>
  <script>
    (function () {
      var vm = window.vm = new Vue({
        el: '.aui-wrapper',
        data: function () {
          return {
            dataForm: {
              username: '',
              password: '',
              captcha: '',
              captchaPath: '../../aui/img/captcha.png',
              rememb: false
            },
            dataRule: {
              username: [
                { required: true, message: '必填项不能为空', trigger: 'blur' }
              ],
              password: [
                { required: true, message: '必填项不能为空', trigger: 'blur' }
              ],
              captcha: [
                { required: true, message: '必填项不能为空', trigger: 'blur' }
              ]
            }
          }
        },
        beforeCreate () {
          vm = this;
        },
        methods: {
          dataFormSubmitHandle () {
            vm.$refs['dataForm'].validate(function (valid) {
              if (valid) {
                axios.get(
                  '../../aui/json/success.json',
                  {
                    params: {
                      'username': vm.dataForm.username,
                      'password': vm.dataForm.password,
                      'captcha': vm.dataForm.captcha
                    }
                  }
                ).then(function (res) {
                  if (res.data && res.data.code === 0) {
                    window.location.href = '../index.html';
                  } else {
                    vm.$message.error(data.msg);
                  }
                });
              }
            });
          }
        }
      });
    })();
  </script>
</body>
</html>